.search-component
  display inline-flex
  border-bottom $default-dark-color 1px solid
  width 100%

.move-out
  transition max-width 0.5s ease-in-out

.move-in
  transition max-width 0.1s linear

.move-in
  max-width 0px

.move-out
  max-width 400px
  margin-left 5px
  margin-right 15px

.search-component-flex
  flex 1 1

.search-replace-element-hidden
  display none

.search-input
  background-color inherit
  color $default-dark-color
  box-shadow none
  border none
  padding 0
  height 30px
  line-height 28px
  width 100%
  font-size 12pt
  outline none

.search-input::-webkit-input-placeholder
  color $default-dark-color
  font-size 12pt
  opacity  0.7

.search-input:-moz-placeholder
/* Mozilla Firefox 4 to 18 */
  color $default-dark-color
  font-size 12pt
  opacity  0.7

.search-input::-moz-placeholder
/* Mozilla Firefox 19+ */
  color $default-dark-color
  font-size 12pt
  opacity  0.7

.search-component md-icon
  height 18px
  width 18px
  outline none

.search-icon
  margin-right 0px
  outline none
  min-height 31px
  line-height 28px !important

